<template>
  <div class="container">
    <div class="appleid">
      <h1 style="text-align: center; font-weight:600;">创建您的 Username</h1>
      <div>只需一个 username，您即可访问 BANK 所有内容。</div>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <input id="name" class="form-control" type="text" placeholder="用户名" v-model.trim="name" />
      </div>
    </div>
    <h5 class="page-header" style="margin-top: 100px;"></h5>
    <div class="form-group">
      <div class="col-sm-12">
        <input
          id="name"
          class="form-control"
          type="text"
          placeholder="name@example.com"
          v-model.trim="mail"
        />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <input id="name" class="form-control" type="password" placeholder="密码" v-model.trim="pwd" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <input
          id="name"
          class="form-control"
          type="password"
          placeholder="确定密码"
          v-model.trim="pwd2"
        />
      </div>
    </div>
    <h5 class="page-header" style="margin-top: 260px;"></h5>
    <div class="form-group">
      <div class="col-sm-12">
        <input
          id="name"
          class="form-control area"
          type="text"
          placeholder="+86 (中国大陆)"
          style="pointer-events: none;"
        />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <input id="name" class="form-control" type="text" placeholder="电话号码" v-model.trim="phone" />
      </div>
    </div>
    <div>
      <input
        type="submit"
        class="form-control btn btn-primary"
        style="width: 200px;height: 40px; margin-top: 30px;margin-bottom: 20px; border-radius: 10px; margin-left: 465px;"
        value="注册"
        @click.prevent="register"
      />
    </div>
  </div>
</template>

<script>
export default {
     name: "UserRegister",
  props: [""],
  data() {
    return {
      name: "",
      pwd: "",
      pwd2: "",
      mail: "",
      phone: ""
    };
  },
  methods: {
    checkForm() {
      if (!this.name || !this.pwd || !this.pwd2 || !this.phone || !this.mail) {
        this.$message({
          type: "warning",
          message: "所有字段不能为空!"
        });
         return false;
      } else {
        if (this.pwd != this.pwd2) {
          this.$message({
            type: "warning",
            message: "密码和确认密码必须相同!"
          });
           return false;
        }

      }
       return true;
    },
    register(){
       if(!this.checkForm()) return;
       this.axios.post("/user/register",{
          name:this.name,
          pwd:this.pwd,
          mail:this.mail,
          phone:this.phone
       })
       .then(response=>{
          if(response.data=="success"){
            this.$message({
            type: "success",
            message: "用户注册成功!"
          });
          this.$router.push("/home")
          }else if(response.data=="fail"){
                         this.$message({
            type: "error",
            message: "用户注册失败!"
          });
          }
       })
    }
  }
};
</script>

<style>
#titleall {
  margin-top: 50px;
}

#title {
  font-size: 24px;
  line-height: 2.125;
  font-weight: 500;
  letter-spacing: 0.015em;
}

#title-a {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  float: right;
  line-height: 40px;
  margin-top: 0;
  margin-right: 80px;
  padding-top: 5px;
}
.appleid {
  text-align: center;
  font-size: 17px;
}
#name {
  height: 56px;
  width: 420px;
  border-radius: 10px;
  margin-left: 350px;
  margin-top: 15px;
}
.area{
  /* background-color: #fafafa; */
  background: linear-gradient(145deg, #ffffff, #f3f0f0);
}
</style>